<template>
	<div class="msg_box">
		<transition-group enter-active-class="animate__animated animate__shakeX" leave-active-class="animate__animated animate__fadeOut">
			<div class="msg_info" v-for="val,index in msgList" :key="index">
				{{val}}
			</div>
		</transition-group>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				msgList: []
			}
		},
		methods: {
			showMsg(msg) {
				this.msgList.push(msg)
				setTimeout(() => {
					this.hideMsg(msg) 
				}, 1500)
			},
			hideMsg(msg) {
				const index = this.msgList.indexOf(msg)
				this.msgList.splice(index, 1)
			}
		}
	}
</script>
<style lang="scss">
	@import 'animate.css';

	.msg_box {
		position: fixed;
		// width: 20px;
		// height: 10px;

		.msg_info {
			color: red;
			padding: 4px 8px;
			background-color: lightpink;
			margin-bottom: 4px;
		}
	}
</style>